<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>在线小说连载</title>
	<link rel="icon" href="images/icon.gif" type="image/x-ico">
	<link rel='stylesheet' type='text/css' href="css/bootstrap.css" />
	<link href="css/style.css" rel='stylesheet' type='text/css' />
	<link rel="stylesheet" href="css/nav.css">
	<link rel="stylesheet" href="iocnfont/iconfont.css">
	<link rel="stylesheet" href="css/gototop.css">
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script src="js/date.js"></script>
	<script>
		$(function (){
            $.ajax({
                url: "novel/novelPageList.do",
                data: {},
                type: "get",
                dataType: "json",
                success: function (data) {
                }
            })
		})

        function pageList(pageNo, pageSize) {

            //查询前,将隐藏域中保存的信息取出来,重新赋予到搜索框中
            $("#chapterId").val($.trim($("#hidden-chapterId").val()));

            $.ajax({
                url: "novel/pageList.do",
                data: {
                    "pageNo": pageNo,
                    "pageSize": pageSize,
                    "id": $.trim($("#chapterId").val()),
                },
                type: "get",
                dataType: "json",
                success: function (data) {
                    var html = "";
                    $.each(data.dataList, function (i, n) {
                        html += '<tr>';
                        html += '<td id="' + n.novelid + '">' + n.name + '</td>';
                        html += '<td>' + n.content + '</td>';
                        html += '<td>' + n.createtime + '</td>';
                        html += '</tr>';
                    })

                    $("#chapterBody").html(html);

                    //计算总页数
                    var totalPages = data.total % pageSize === 0 ? data.total / pageSize : parseInt(data.total / pageSize) + 1;

                    //数据处理完毕后,结合分页插件对前端展现分页相关的信息
                    $("#chapterPage").bs_pagination({
                        currentPage: pageNo, // 页码
                        rowsPerPage: pageSize, // 每页显示的记录条数
                        maxRowsPerPage: 20, // 每页最多显示的记录条数
                        totalPages: totalPages, // 总页数
                        totalRows: data.total, // 总记录条数

                        visiblePageLinks: 3, // 显示几个卡片

                        showGoToPage: true,
                        showRowsPerPage: true,
                        showRowsInfo: true,
                        showRowsDefaultInfo: true,

                        //该回调函数是在,点击分页组件的时候触发的
                        //pageList方法调用的是自己写的方法,但是里面的参数,是分页插件提供的,不能碰
                        onChangePage: function (event, data) {
                            pageList(data.currentPage, data.rowsPerPage);
                        }
                    });

                }
            })
        }
	</script>
</head>

<body>
	<header class="index-banner">
		<div class="container">
			<div class="header_top">
				<div class=logo>
					<a href="index.jsp"><img src="images/logo.jpeg" alt="" width="100px" height="50px"> </a>
				</div>
			</div>
			<!-- 导航栏 -->
			<div id="nav-1">
				<ul class="nav">
					<li class="slide1"></li>
					<li class="slide2"></li>
					<li><a class="active" href="index.jsp">网站首页</a></li>
					<li><a href="about.html">书库</a></li>
					<li><a href="#">作者专区</a></li>
					<li>${SESSION_USER.name}</li>
					<li><a href="reader/loginOut.do" id="loginOutBtn">退出</a></li>
				</ul>
			</div>
			<script src="js/nav.js"></script>
		</div>

		<!-- 轮播图 运用了wmuslider插件 -->
		<div class="wmuSlider example1">
			<article style="position: absolute; width: 100%; opacity: 0;">
				<div class="banner-wrap">
					<img src="images/banner1.jpeg" />
				</div>
			</article>
			<article style="position: absolute; width: 100%; opacity: 0;">
				<div class="banner-wrap">
					<img src="images/banner2.jpeg" />
				</div>
			</article>
			<article style="position: absolute; width: 100%; opacity: 0;">
				<div class="banner-wrap">
					<img src="images/banner3.jpeg" />
				</div>
			</article>
			<article style="position: absolute; width: 100%; opacity: 0;">
				<div class="banner-wrap">
					<img src="images/banner.jpeg" />
				</div>
			</article>
			<article style="position: absolute; width: 100%; opacity: 0;">
				<div class="banner-wrap">
					<h1>
						<font color="grey">更多精品小说等您发现。。。</font>
					</h1>
				</div>
			</article>
		</div>
		<script src="js/jquery.wmuSlider.js"></script>
		<script>
			$('.example1').wmuSlider();
		</script>
	</header>

	<article class="content">
		<div class="container">
			<!-- bootstrap框架的侧边栏样式  -->
			<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 center">
				<ul class="menu1">
					<li class="item1"><a href="#" class="">奇幻玄幻<img class="arrow-img" src="images/arrow.png" alt="" />
						</a>
						<ul class="cute" style="display: none; overflow: hidden;">
							<li class="subitem1"><a href="../sales.jsp">西方奇幻 </a></li>
							<li class="subitem2"><a href="../sales.jsp">东方玄幻</a></li>
							<li class="subitem3"><a href="../sales.jsp">异世大陆 </a></li>
							<li class="subitem3"><a href="../sales.jsp">转世重生 </a></li>
							<li class="subitem3"><a href="../sales.jsp">异术超能 </a></li>
							<li class="subitem3"><a href="../sales.jsp">上古神话</a></li>
						</ul>
					</li>
					<li class="item1"><a href="#" class="">武侠仙侠<img class="arrow-img" src="images/arrow.png" alt="" />
						</a>
						<ul class="cute" style="display: none; overflow: hidden;">
							<li class="subitem1"><a href="../sales.jsp">古典仙侠 </a></li>
							<li class="subitem2"><a href="../sales.jsp">现代修真</a></li>
							<li class="subitem3"><a href="../sales.jsp">新派武侠 </a></li>
							<li class="subitem3"><a href="../sales.jsp">传统武侠 </a></li>
							<li class="subitem3"><a href="../sales.jsp">奇幻修真 </a></li>
						</ul>
					</li>
					<li class="item1"><a href="#" class="">历史军事<img class="arrow-img" src="images/arrow.png" alt="" />
						</a>
						<ul class="cute" style="display: none; overflow: hidden;">
							<li class="subitem1"><a href="../sales.jsp">穿越历史</a></li>
							<li class="subitem2"><a href="../sales.jsp">架空历史</a></li>
							<li class="subitem3"><a href="../sales.jsp">历史专记 </a></li>
						</ul>
					</li>
					<li class="item1"><a href="#" class="">都市娱乐<img class="arrow-img" src="images/arrow.png" alt="" />
						</a>
						<ul class="cute" style="display: none; overflow: hidden;">
							<li class="subitem1"><a href="../sales.jsp">现实题材 </a></li>
							<li class="subitem2"><a href="../sales.jsp">职场商战</a></li>
							<li class="subitem3"><a href="../sales.jsp">江湖情仇 </a></li>
							<li class="subitem3"><a href="../sales.jsp">都市重生 </a></li>
							<li class="subitem3"><a href="../sales.jsp">都市异能 </a></li>
							<li class="subitem3"><a href="../sales.jsp">都市生活</a></li>
							<li class="subitem3"><a href="../sales.jsp">青春校园</a></li>
						</ul>
					</li>
					<li class="item1"><a href="#" class="">悬疑灵异<img class="arrow-img" src="images/arrow.png" alt="" />
						</a>
						<ul class="cute" style="display: none; overflow: hidden;">
							<li class="subitem1"><a href="../sales.jsp">推理悬念 </a></li>
							<li class="subitem2"><a href="../sales.jsp">恐怖惊悚</a></li>
							<li class="subitem3"><a href="../sales.jsp">灵异神怪 </a></li>
							<li class="subitem3"><a href="../sales.jsp">探险异闻 </a></li>
							<li class="subitem3"><a href="../sales.jsp">神秘文化 </a></li>
						</ul>
					</li>

				</ul>
				<!--手风琴效果的侧边栏效果-->
				<script type="text/javascript">
					$(function () {
						var menu1_ul = $('.menu1> li > ul'),
							menu1_a = $('.menu1 > li > a');
						menu1_ul.hide();
						menu1_a.click(function (e) {
							e.preventDefault();
							if (!$(this).hasClass('active')) {
								menu1_a.removeClass('active');
								menu1_ul.filter(':visible').slideUp('normal');
								$(this).addClass('active').next().stop(true, true).slideDown('normal');
							} else {
								$(this).removeClass('active');
								$(this).next().stop(true, true).slideUp('normal');
							}
						});

					});
				</script>
				<!-- 侧边栏 -->
				<ul class="box3_list">
					<li><a href="jsp/readr/index.jsp">首页</a></li>
					<li><a href="about.html">书库</a></li>
					<li><a href="#">作者专区</a></li>
				</ul>
			</div>


			<!-- 小说介绍 -->
			<div class="col-lg-6 col-md-6 col-xs-6 col-sm-6 center">
				<input type="hidden" id="hidden-novelId">
				<div class="product">
					<form class="form-inline" role="form" style="position: relative;top: 1%; left: 70px;">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">小说编号:</div>
								<input type="text" class="form-control" id="novelId">
							</div>
						</div>
						<button id="searchBtn" type="button" class="btn btn-default">查询</button>
					</form>
					<ul  id="novelPageBody">
						<li>
							<div class="pro-img">
								<a href="jsp/single.jsp">
									<img src="images/bigbook1.jpeg" alt="">
								</a>
							</div>
							<h3><a href="jsp/single.jsp"> 黑雾之下</a></h3>
							<p class="desc">不明黑色拱门的出现导致全球陷入巨大恐慌，负责探索门后世界的【灯塔基地】随之成立</p>
							<p class="price">
								<span>共七百八十六章</span>

							</p>
							<div class="review">
								<a href="jsp/single.jsp">
									<span class="msg">字数235.0万</span>
									<span class="auther"> 持续更新 </span>
									<span class="more"> 总点击量118.3万 </span>
								</a>
							</div>
						</li>
						<li>
							<div class="pro-img">
								<a href="../workbench/fantasy/single.jsp">
									<img src="images/bigbook2.jpeg" alt="">
								</a>
							</div>
							<h3><a href="../workbench/fantasy/single.jsp">仙剑在此</a></h3>
							<p class="desc">表面上他是个剑仙。实际上……他是一个挂逼。</p>
							<p class="price">
								<span>一千四百四十四章</span>
							</p>
							<div class="review">
								<a href="../workbench/fantasy/single.jsp">
									<span class="msg">字数350.6万</span>
									<span class="auther"> 总推荐1002.8万 </span>
									<span class="more"> 总点击量8181.4万 </span>
								</a>
							</div>
						</li>
						<li>
							<div class="pro-img">
								<a href="../workbench/fantasy/single.jsp">
									<img src="images/bigbook3.jpeg" alt="">
								</a>
							</div>
							<h3><a href="../workbench/fantasy/single.jsp">仙朝 </a></h3>
							<p class="desc">郢都城的日落，是天底下最美的景色。”</p>
							<p class="price">
								<span>共六百三十一章</span>
							</p>
							<div class="review">
								<a href="../workbench/fantasy/single.jsp">
									<span class="msg">字数350.6万</span>
									<span class="auther"> 总推荐1002.8万 </span>
									<span class="more"> 总点击量8181.4万 </span>
								</a>
							</div>
						</li>
						<li>
							<div class="pro-img">
								<a href="../workbench/fantasy/single.jsp">
									<img src="images/bigbook4.jpeg" alt="">
								</a>
							</div>
							<h3><a href="../workbench/fantasy/single.jsp">大佬每天脑补夫人爱惨了他</a></h3>
							<p class="desc">所有人都认为白沐夏在袁家是个笑话。</p>
							<p class="price">
								<span>共六百三十一章</span>
							</p>
							<div class="review">
								<a href="../workbench/fantasy/single.jsp">
									<span class="msg">字数350.6万</span>
									<span class="auther"> 总推荐1002.8万 </span>
									<span class="more"> 总点击量8181.4万 </span>
								</a>
							</div>
						</li>
						<li>
							<div class="pro-img">
								<a href="../workbench/fantasy/single.jsp">
									<img src="images/bigbook5.jpg" alt="">
								</a>
							</div>
							<h3><a href="../workbench/fantasy/single.jsp">大道南行</a></h3>
							<p class="desc">修得一念自在明，大道悠悠亘古清。一朝得悟两全法，枯守岁月道难行</p>
							<p class="price">
								<span>共六百三十一章</span>
							</p>
							<div class="review">
								<a href="../workbench/fantasy/single.jsp">
									<span class="msg">字数350.6万</span>
									<span class="auther"> 总推荐1002.8万 </span>
									<span class="more"> 总点击量8181.4万 </span>
								</a>
							</div>
						</li>
						<li>
							<div class="pro-img">
								<a href="../workbench/fantasy/single.jsp">
									<img src="images/bigbook6.jpg" alt="">
								</a>
							</div>
							<h3><a href="../workbench/fantasy/single.jsp">都市奇门相师</a></h3>
							<p class="desc">奇门者，通古知今，有鬼神莫测之能也！</p>
							<p class="price">
								<span>共六百三十一章</span>
							</p>
							<div class="review">
								<a href="../workbench/fantasy/single.jsp">
									<span class="msg">字数350.6万</span>
									<span class="auther"> 总推荐1002.8万 </span>
									<span class="more"> 总点击量8181.4万 </span>
								</a>
							</div>
						</li>
					</ul>
				</div>
			</div>


			<!-- 总点击排行榜 -->
			<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 center right_box ">
				<!-- 时间显示 -->
				<p id="timeShow">今天是：20xx年x月xx日星期x xx:xx:xx</p>
				<ul class="sales_list">
					<li>总点击排行Top8</li>
					<ul>
						<div class="top5">
							<div class="cart_box">
								<div class="message">
									<div class="rank">TOP<br><span class="actual">1</span></div>
									<div class="list_img"><a href="../workbench/fantasy/single.jsp"><img src="images/book1.jpg"
																										 class="img-responsive" alt="" /></a>
									</div>
									<div class="list_desc">
										<h4><a href="../workbench/fantasy/single.jsp">一剑独尊</a></h4>总点击：<span class="actual">
											9932.1万</span>
									</div>
									<div class="clearfix"></div>
								</div>


								<div class="message">
									<div class="rank">TOP<br><span class="actual">2</span></div>
									<div class="list_img"><a href=""><img src="images/book2.jpg" class="img-responsive"
												alt="" /></a>
									</div>
									<div class="list_desc">
										<h4><a href="../workbench/fantasy/single.jsp">剑仙在此 </a></h4>总点击：<span class="actual">
											8182.4万</span>
									</div>
									<div class="clearfix"></div>
								</div>

								<div class="message">
									<div class="rank">TOP<br><span class="actual">3</span></div>
									<div class="list_img"><a href=""><img src="images/book3.jpg" class="img-responsive"
												alt="" /></a>
									</div>
									<div class="list_desc">
										<h4><a href="../workbench/fantasy/single.jsp">将军好凶猛 </a></h4>总点击：<span class="actual">
											7143.3万 </span>
									</div>
									<div class="clearfix"></div>
								</div>

								<div class="message">
									<div class="rank">TOP<br><span>4</span></div>
									<div class="list_img"><a href=""><img src="images/book4.jpg" class="img-responsive"
												alt="" /></a>
									</div>
									<div class="list_desc">
										<h4><a href="../workbench/fantasy/single.jsp">刀破仙途 </a></h4>总点击：<span class="actual">
											6314.2万</span>
									</div>
									<div class="clearfix"></div>
								</div>

								<div class="message">
									<div class="rank">TOP<br><span>5</span></div>
									<div class="list_img"><a href=""><img src="images/book5.jpg" class="img-responsive"
												alt="" /></a>
									</div>
									<div class="list_desc">
										<h4><a href="../workbench/fantasy/single.jsp">不让江山 </a></h4>总点击：<span class="actual">
											5141万</span>
									</div>
									<div class="clearfix"></div>
								</div>

								<div class="message">
									<div class="rank">TOP<br><span>6</span></div>
									<div class="list_img"><a href=""><img src="images/book6.jpg" class="img-responsive"
												alt="" /></a>
									</div>
									<div class="list_desc">
										<h4><a href="../workbench/fantasy/single.jsp">剑来</a></h4>总点击：<span class="actual">
											4941万</span>
									</div>
									<div class="clearfix"></div>
								</div>

								<div class="message">
									<div class="rank">TOP<br><span>7</span></div>
									<div class="list_img"><a href=""><img src="images/book7.jpg" class="img-responsive"
												alt="" /></a>
									</div>
									<div class="list_desc">
										<h4><a href="../workbench/fantasy/single.jsp">赘婿出山 </a></h4>总点击：<span class="actual">
											3641万</span>
									</div>
									<div class="clearfix"></div>
								</div>

								<div class="message">
									<div class="rank">TOP<br><span>8</span></div>
									<div class="list_img"><a href=""><img src="images/book8.jpg" class="img-responsive"
												alt="" /></a>
									</div>
									<div class="list_desc">
										<h4><a href="../workbench/fantasy/single.jsp">儒武争锋 </a></h4>总点击：<span class="actual">
											2541万</span>
									</div>
									<div class="clearfix"></div>
								</div>
							</div>
						</div>
					</ul>
				</ul>
			</div>
		</div>



		<!-- 回到顶部 -->
		</div>
		<button class="gototop"><span>返回顶部</span></button>
		</div>
		<script src="js/gototop.js"></script>
		<!-- 初始化回到顶部的按钮 -->
		<script type="text/javascript">
			$(function () {
				$(".gototop").gototop({
					position: 0, //返回到页面顶部的位置
					duration: 1250, //返回顶部平滑过渡动画的持续时间
					visibleAt: 300, //返回顶部按钮在向下滚动多少像素时可见
				});
			});
		</script>
	</article>
	<footer class="footer">
		<div class="container">
			<img src="images/logo.jpeg" width="100px" height="50px" alt="" />
			<p><a href="https://www.ecut.edu.cn/">https://www.ecut.edu.cn/</a></p>
			<div class="copy">
				<p>Copyright &copy;2020 East China University of Technology. All Rights Reserved. <br>
					地址：南昌校区：江西省南昌市青山湖区蛟桥镇广兰大道418号；抚州校区：江西省抚州市学府路56号 邮编：330000 <br>
					电话：18317982215 张永康 赣ICP备xxxxxx号 <br></p>
			</div>
			<ul class="social">
				<li><a href="#"> <i class="fb"> </i> </a></li>
				<li><a href="#"> <i class="tw"> </i> </a></li>
			</ul>
		</div>
	</footer>
</body>

</html>